<template>
  <div>
    <el-dialog
      class="base-dialog"
      :custom-class="'panna-dialog_big'"
      :append-to-body="true"
      :title="dataList.EditUsage"
      align="center"
      destroy-on-close
      :visible.sync="innerDialogFormVisible"
      @close="closeDialog"
    >
      <div>
        <el-divider class="el-divider-specail" content-position="left"
          ><span>{{ dataList.UsageDevice }}</span>
        </el-divider>
        <el-table
          :data="deviceList"
          element-loading-text="Loading"
          fit
          highlight-current-row
        >
          <el-table-column :label="dataList.DeviceNumber">
            <template slot-scope="scope">
              {{ scope.row.num }}
            </template>
          </el-table-column>
          <el-table-column
            :label="
              $i18n.locale === 'en' ? dataList.DeviceEName : dataList.DeviceName
            "
          >
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column :label="dataList.DeviceSpecifications">
            <template slot-scope="scope">
              {{ scope.row.specifications }}
            </template>
          </el-table-column>
          <el-table-column
            :label="
              $i18n.locale === 'en'
                ? dataList.eDeviceStorageAddress
                : dataList.DeviceStorageAddress
            "
          >
            <template slot-scope="scope">
              {{ scope.row.storageAddress }}
            </template>
          </el-table-column>
          <el-table-column :label="dataList.DevicePersonResponsibleId">
            <template slot-scope="scope">
              {{ scope.row.personResponsibleName }}
            </template>
          </el-table-column>
        </el-table>
        <el-divider class="el-divider-specail" content-position="left"
          ><span>{{ dataList.UsageInfo }}</span>
        </el-divider>
        <el-descriptions class="margin-top" :column="2" :size="size" border>
          <el-descriptions-item>
            <template slot="label"> {{ dataList.UsageName }}</template>
            <UserDropDownList
              ref="deviceUserIdMoreList"
              :value="deviceUsageLog.deviceUserIdMoreList"
              :multiple="multiple"
              :borrow-person-change="borrowPersonChange"
            />
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> {{ dataList.UsageName }}</template>
            <el-input
              v-model="deviceUsageLog.reasonsForUsing"
              type="textarea"
            ></el-input>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> {{ dataList.BeginUsageTime }}</template>
            <el-date-picker
              ref="startTime"
              v-model="deviceUsageLog.startTime"
              type="datetime"
              :placeholder="dataList.SelectDateTime"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> {{ dataList.EndUsageTime }}</template>
            <el-date-picker
              ref="endTime"
              v-model="deviceUsageLog.endTime"
              type="datetime"
              :placeholder="dataList.SelectDateTime"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> {{ dataList.PreUseStatus }}</template>

            <DicDropDownList
              ref="deviceFrontStateLabel"
              v-model="deviceUsageLog.deviceFrontState"
              style="width: 50%; float: left"
              dict-code="deviceStatusList"
              :is-all="false"
              :display-text.sync="displayText"
            />
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> {{ dataList.PostUseStatus }}</template>
            <DicDropDownList
              ref="deviceLaterStateLabel"
              v-model="deviceUsageLog.deviceLaterState"
              style="width: 50%; float: left"
              dict-code="deviceStatusList"
              :is-all="false"
              :display-text.sync="displayText"
            />
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> {{ dataList.Rocorder }}</template>

            {{ deviceUsageLog.creatorName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> {{ dataList.Deviceremark }}</template>
            <el-input
              v-model="deviceUsageLog.remake"
              type="textarea"
            ></el-input>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="primary" @click="onSubmit('formData')">{{
          btn.Save
        }}</el-button>
        <el-button @click="cancel"> {{ btn.Off }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { get, update } from "../../api/DeviceUsageLog.js";
import { formatTime } from "../../utils/time";
import UserDropDownList from "../../components/UserDropDownList.vue";
import DicDropDownList from "../../components/DicDropDownList.vue";
export default {
  name: "DeviceUsageLogEdit",
  components: {
    UserDropDownList,
    DicDropDownList,
  },
  props: {
    id: {
      type: String,
      default: "",
    },
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      multiple: true,
      formatTime,
      displayText: [
        this.$t("ModuleDevice.Device.Normal"),
        this.$t("ModuleDevice.Device.Fault"),
        this.$t("ModuleDevice.Device.Downgrading"),
      ],
      size: "",
      deviceList: [],
      deviceUsageLog: {},
      formDataRules: {
        deviceUserIdMoreList: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        startTime: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        endTime: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        deviceFrontStateLabel: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        deviceLaterStateLabel: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
      },
    };
  },
  computed: {
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
    dataList() {
      return this.$t("ModuleDevice.Device");
    },
  },
  watch: {
    innerDialogFormVisible(val) {
      this.$emit("update:dialogFormVisible", val);
    },
  },
  created() {
    this.innerDialogFormVisible = this.dialogFormVisible;
    this.getData();
  },
  methods: {
    borrowPersonChange(val) {
      this.deviceUsageLog.userId = 0;
      this.deviceUsageLog.deviceUserIdMoreList = val;
    },
    onSubmit() {
      if (this.deviceUsageLog.endTime < this.deviceUsageLog.startTime) {
        this.$message.error(
          this.$t("ModuleDevice.Message.BeginTimeLessEndTime")
        );
        return false;
      }
      if (this.deviceUsageLog.deviceUserIdMoreList.length <= 0) {
        this.$message.error(this.$t("ModuleDevice.Message.UsageNameNull"));
        return false;
      }
      if (
        this.deviceUsageLog.startTime === "" ||
        this.deviceUsageLog.startTime === undefined ||
        this.deviceUsageLog.startTime === null
      ) {
        this.$message.error(this.$t("ModuleDevice.Message.BeginTimeNull"));
        return false;
      }
      if (
        this.deviceUsageLog.endTime === "" ||
        this.deviceUsageLog.endTime === undefined ||
        this.deviceUsageLog.endTime === null
      ) {
        this.$message.error(this.$t("ModuleDevice.Message.EndTimeNull"));
        return false;
      }
      if (this.deviceUsageLog.reasonsForUsing === "") {
        this.$message.error(this.$t("ModuleDevice.Message.ReasonsOfUsageNull"));
        return false;
      }
      this.deviceUsageLog.userIdList =
        this.deviceUsageLog.deviceUserIdMoreList.join(",");
      console.log(this.deviceUsageLog);
      debugger;
      update(this.deviceUsageLog).then((res) => {
        this.cancel();
      });
    },
    getData() {
      get({ id: this.id }).then((res) => {
        this.deviceUsageLog = res.data;
        if (res.data.deviceDto !== undefined && res.data.deviceDto !== null) {
          this.deviceList.push(res.data.deviceDto);
        }
      });
    },
    cancel() {
      this.innerDialogFormVisible = false;
      this.$emit("update:dialogFormVisible", false);
      this.$emit("close");
    },
    closeDialog() {
      console.log("99");

      this.cancel();
    },
  },
};
</script>
